<template>
 <div class="firstList">
   <h3 class="title mb15">
     <span class="t">办件流程</span>
   </h3>

   <Row type="flex" justify="space-between">
     <Col flex="240px" class="bgBalck">
       <Menu mode="inline" theme="dark" :inline-collapsed="collapsed" @click="NavChange"
         v-model:openKeys="openKeys"  v-model:selectedKeys="selectedKeys">
         <MenuItem  :key="item.data.orderNo" v-for="item in MenuItemList">
           <span>{{ item.data.itemName }}</span>
         </MenuItem>
       </Menu>
     </Col>
     <Col flex="960px" class="bgWhite">
       <div class="pro-top">
         <h3 class="title2 mb20">{{stepName}}-操作步骤：</h3>
         <ul class="ina" v-if="stepList.length">
           <li  v-for="(item,index) in stepList"><i>{{ index+1 }}</i>{{ item }}</li>
         </ul>
         <div v-else>
           <Empty description="暂无操作步骤数据"></Empty>
         </div>
       </div>
       <div class="pro-bottom">
         <h3 class="title2">可能出现的问题：</h3>
         <newsList v-show="newsList===item.data.itemId" v-for="item in MenuItemList" :bannerId="itemId" :itemId="item.data.itemId"></newsList>
       </div>
     </Col>
   </Row>

 </div>
</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, ref, toRefs} from "vue";
import {Col, Menu, Row , Empty} from "ant-design-vue";
import {findOneDataObj, parseTime} from '/@/utils';
import {newsList} from '/@/components/newsList';
import { getItemTreeApi} from "/@/api/theme";


export default defineComponent({
  name: "firstList",
  components: { Row, Col , Menu ,MenuItem:Menu.Item , newsList ,Empty },
  setup() {
    const itemId = inject('itemId') as string;
    const stepName = ref('');
    const MenuItemList = ref([]);
    const newsList =ref('')

    let getData:any = [];
    const stepList = ref<any>([]);

    const state = reactive({
      collapsed: false,
      selectedKeys: [1],
      openKeys: ['sub1'],
      preOpenKeys: ['sub1'],
    });

    const getItemTree = async () => {
      const Param = { includeSelf:false,itemId:itemId }
      let { success , data } = await getItemTreeApi(Param);
      if(success){
        let noticeObj = findOneDataObj(data,'办件流程');
        getData =  noticeObj.children;
        if(getData!==null){
          MenuItemList.value = noticeObj.children
          stepName.value = getData[0].data.itemName;
          newsList.value = getData[0].data.itemId;
          stepSplit(getData[0].data.bizDesc)
        }
      }
    }

    const stepSplit = (data:string|null) =>{
      if(data){
        stepList.value = data.split("》");
      }else {
        stepList.value = []
      }
    }

    const NavChange = param => {
      let index = param.key-1;
      let { data } = getData[index];
      stepName.value = data.itemName;
      newsList.value = data.itemId;
      stepSplit(data.bizDesc)
    }



    const init = () => {
      getItemTree();
    }
    onMounted(init)
    return {
       parseTime, ...toRefs(state) , newsList , itemId,
      MenuItemList , stepName , NavChange , stepList
    };
  }
});
</script>

<style lang="less" scoped>
.bgBalck{
  background: #001529;
}

.firstList{
  .title{
    span.t{
      display: inline-block;
      padding-left: 10px;
      font-size: 20px;
      line-height: 1;
      border-left: 4px solid #2E77D6;
    }

  }
}

.pro-top{
  padding: 30px 40px 10px;
  border-bottom: 1px dashed #E0E3EA;

  .ina{
    li{
      display: inline-block;
      height: 60px;
      padding: 15px 25px 15px 15px;
      margin: 0 30px 20px 0;
      background: #F4F9FF;
      border-radius: 30px;

      i{
        display: inline-block;
        width: 30px;
        height: 30px;
        margin-right: 10px;
        font-style: normal;
        line-height: 28px;
        color: white;
        text-align: center;
        background: #40ACFE;
        border-radius: 50%;
      }
    }
  }
}

.pro-bottom{
  padding: 30px 40px 50px;
}

::v-deep(.ant-menu){
   .ant-menu-item{
    margin-top: 0;
  }
}


</style>
